<template>
  <div class="home">
    <div class="header-bg"></div>
    <HeaderBar title="任务集市" rightIcon="plus" @back="goBack" @right="goMyTasks" />
    <van-search v-model="search" placeholder="请输入..." class="search-bar" @update:model-value="onSearch" />
    <div class="task-list">
      <TaskCard v-for="task in filteredTasks" :key="task.id" :task="task" @click="goDetail(task.id)" />
    </div>
    <van-button class="publish-btn" type="primary" @click="goPublish">发布</van-button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTaskStore } from '../store/index.js'
import HeaderBar from '../components/HeaderBar.vue'
import TaskCard from '../components/TaskCard.vue'
const router = useRouter()
const store = useTaskStore()
const search = ref('')
const filteredTasks = computed(() => store.search(search.value))
function goBack() { /* 可选：history.back() */ }
function goMyTasks() { router.push('/my-tasks') }
function goDetail(id) { router.push(`/task/${id}`) }
function goPublish() { router.push('/publish') }
function onSearch(val) { search.value = val }
</script>
<style scoped>
.home {
  min-height: 100vh;
  background: #f7f7f7;
  position: relative;
  padding: 0;
  width: 100vw;
  box-sizing: border-box;
}
.header-bg {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100vw;
  height: 160px;
  background: linear-gradient(180deg, #6fd6b6 0%, #a7e6d7 100%);
  z-index: 0;
}
.search-bar {
  margin: 0 8px 10px 8px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 2;
  position: relative;
}
.task-list {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  padding-bottom: 80px;
}
.publish-btn {
  position: fixed;
  right: 12px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 16px;
  box-shadow: 0 4px 16px 0 rgba(39,174,96,0.18);
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 